import React from "react";
import { Toast, NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Tabs } from 'react-vant'
import './style.less'
import Tabber from '../Tabber/Tabber'
import { ProductCard, Tag, Button } from 'react-vant';

function Piao() {
    const items = Array.from({ length: 3 }, (_, i) => i + 1)
  const navigator = useNavigate();
  return (
    <div>
      <div>
        <NavBar title="票务" onClickLeft={() => navigator(-1)} />
      </div>
      <div>
        <div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              marginTop: "50px",
            }}
          >
            <p
              style={{
                color: "#000",
                width: "40px",
                height: "40px",
                borderRadius: "10px",
                backgroundColor: "#fff",
                textAlign: "center",
                lineHeight: "40px",
              }}
            >
              27
            </p>
            <p
              style={{
                color: "#000",
                width: "40px",
                height: "40px",
                borderRadius: "10px",
                backgroundColor: "#fff",
                textAlign: "center",
                lineHeight: "40px",
              }}
            >
              28
            </p>
            <p
              style={{
                fontWeight: "bold",
                color: "#fff",
                width: "40px",
                height: "40px",
                borderRadius: "10px",
                backgroundColor: "#000",
                textAlign: "center",
                lineHeight: "40px",
              }}
            >
              29
            </p>
            <p
              style={{
                color: "#000",
                width: "40px",
                height: "40px",
                borderRadius: "10px",
                backgroundColor: "#fff",
                textAlign: "center",
                lineHeight: "40px",
              }}
            >
              30
            </p>
            <p
              style={{
                color: "#000",
                width: "40px",
                height: "40px",
                borderRadius: "10px",
                backgroundColor: "#fff",
                textAlign: "center",
                lineHeight: "40px",
              }}
            >
              3
            </p>
          </div>
        </div>


        <div style={{marginTop: '30px'}}>
        <div className='demo-tabs'>
        <Tabs border type='capsule'>
        {items.map(item => (
          <Tabs.TabPane key={item} title={item===1?'待支付':'待使用'}>
            {item===1?<div>
                <ProductCard
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品名称"
      thumb="https://img2.baidu.com/it/u=611788001,1439838359&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800"
    />
     <ProductCard
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品名称"
      thumb="https://img1.baidu.com/it/u=356184252,4293637301&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750"
    />
            </div>:<div>
            <ProductCard
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品名称"
      thumb="https://img1.baidu.com/it/u=356184252,4293637301&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750"
    /></div>}
          </Tabs.TabPane>
        ))}
      </Tabs>
        </div>
        </div>
      </div>
      <div>
        <Tabber></Tabber>
      </div>
    </div>
  );
}

export default Piao;
